<template>
	<view class="status-bar" :style="{ height: statusBarHeight + 'px' }">
		<view class="status-bar-bg" :class="gradientClass"></view>
	</view>
</template>

<script>
	export default {
		name: 'CustomStatusBar',
		props: {
			gradientType: {
				type: String,
				default: 'default' // default, assistant, message, chat
			}
		},
		data() {
			return {
				statusBarHeight: 0
			}
		},
		computed: {
			gradientClass() {
				return `gradient-${this.gradientType}`;
			}
		},
		mounted() {
			// #ifdef APP-PLUS
			this.statusBarHeight = plus.navigator.getStatusbarHeight();
			// #endif
			// #ifndef APP-PLUS
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			// #endif
		}
	}
</script>

<style scoped>
	.status-bar {
		width: 100%;
		position: relative;
	}
	
	.status-bar-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	/* 默认渐变色：#FFFDE4 → #005AA7 */
	.gradient-default {
		background: linear-gradient(135deg, #FFFDE4 0%, #005AA7 100%);
	}
	
	/* 智能助手页面渐变色：#74ebd5 → #ACB6E5 */
	.gradient-assistant {
		background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
	}
	
	/* 消息页面渐变色：#E5E5BE → #003973 */
	.gradient-message {
		background: linear-gradient(135deg, #E5E5BE 0%, #003973 100%);
	}
	
	/* 交流区页面渐变色：#00d2ff → #928DAB */
	.gradient-chat {
		background: linear-gradient(135deg, #00d2ff 0%, #928DAB 100%);
	}
</style>